<template>
  <div class="box">
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column :width="flexColumnWidth('column1', tableData)" prop="column1" label="列1"></el-table-column>
      <el-table-column :width="flexColumnWidth('column2', tableData)" prop="column2" label="列2"></el-table-column>
      <el-table-column prop="column3" label="列3"></el-table-column>
      <el-table-column prop="column4" label="列4"></el-table-column>
      <el-table-column prop="column5" label="列5"></el-table-column>
      <el-table-column prop="column6" label="列6"></el-table-column>
      <el-table-column prop="column7" label="列7"></el-table-column>
      <el-table-column prop="column8" label="列8"></el-table-column>
      <el-table-column prop="column9" label="列9"></el-table-column>
      <el-table-column prop="column10" label="列10"></el-table-column>
      <el-table-column prop="column11" label="列11"></el-table-column>
      <el-table-column prop="column12" label="列12"></el-table-column>
      <el-table-column prop="column13" label="列13"></el-table-column>
      <el-table-column prop="column14" label="列14"></el-table-column>
      <el-table-column prop="column15" label="列15"></el-table-column>
      <el-table-column prop="column16" label="列16"></el-table-column>
      <el-table-column prop="column17" label="列17"></el-table-column>
      <el-table-column prop="column18" label="列18"></el-table-column>
      <el-table-column prop="column19" label="列19"></el-table-column>
      <el-table-column prop="column20" label="列20"></el-table-column>
      <el-table-column prop="column21" label="列21"></el-table-column>
      <el-table-column prop="column22" label="列22"></el-table-column>
      <el-table-column prop="column23" label="列23"></el-table-column>
      <el-table-column prop="column24" label="列24"></el-table-column>
      <el-table-column prop="column25" label="列25"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      tableData: [{
        column1: 'tr为该列的字段名(传字符串);tableData为该表格的数据源(传变量);flag为可选值，可不传该参数,传参时可选flag为则设置列宽适配该列中最长的内容,flag为则设置列宽适',
        column2: '记录数肯德基富士康戴假发'
      }, {
        column1: '从零开始京东客服',
        column2: 'skdjfsd'
      }]
    };
  },
  mounted() {

  },
  watch: {

  },
  computed: {

  },
  methods: {
    flexColumnWidth(column, tableData) {
      return this.$flexColumnWidth(column, tableData)
    }
  },
};
</script>
<style scoped>
.box {
  /* margin: .125rem; */
  background-color: v-bind(bgColor);
  /* width: 100%; */
  height: 100vh;
  padding: .25rem;
}

.el-table ::v-deep th {
  padding: 0;
  white-space: nowrap;
  min-width: fit-content;
}

.el-table ::v-deep td {
  padding: 1px;
  white-space: nowrap;
  width: fit-content;
}

/** 修改el-card默认paddingL:20px-内边距 **/
.el-card__body {
  padding: 10px;
}

.el-table ::v-deep .cell {
  white-space: nowrap;
  width: fit-content;
}
</style>